<!--
 * @Author: Nend 758258389@qq.com
 * @Date: 2022-09-07 17:16:26
 * @LastEditors: Nend 758258389@qq.com
 * @LastEditTime: 2022-09-08 17:45:45
 * @FilePath: \phase3-front-new\src\components\MoneyManager\ProSpence.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-box">
    <!--按钮-->
    <div class="block">
      <!--条件查询弹出按钮-->
      <el-button type="primary" @click="centerDialogVisible = true"
        >条件查询</el-button
      >
      <!--导入导出按钮-->
      <el-button type="primary" style="float: right">导入</el-button>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="info" style="float: right">导出</el-button>
    </div>
    <br />

    <!--条件弹出窗口-->
    <el-dialog
      title="条件窗口"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <div class="box">
        <span><b>流水ID筛选</b></span>
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="condition.spenIdJudgeType" @change="selectBlurLogic">
          <el-option label="大于" value="gt"></el-option>
          <el-option label="小于" value="lt"></el-option>
          <el-option label="等于" value="eq"></el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-input
          v-model="condition.spenId"
          placeholder="流水ID输入"
          style="width: 175px"
        ></el-input>
        <br /><br />
      </div>
      -------------------------------------------
      <div class="box">
        <span><b>项目ID筛选</b></span>
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="condition.proIdJudgeType" @change="selectBlurLogic">
          <el-option label="大于" value="gt"></el-option>
          <el-option label="小于" value="lt"></el-option>
          <el-option label="等于" value="eq"></el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-input
          v-model="condition.proId"
          placeholder="项目ID输入"
          style="width: 175px"
        ></el-input>
        <br /><br />
      </div>
      -------------------------------------------
      <div class="box">
        <span><b>时间筛选</b></span>
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="condition.dateJudgeType" @change="selectBlurLogic">
          <el-option label="大于" value="gt"></el-option>
          <el-option label="小于" value="lt"></el-option>
          <el-option label="等于" value="eq"></el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-input
          v-model="condition.spenDate"
          placeholder="时间输入，注意格式"
          style="width: 175px"
        ></el-input>

        <br /><br />
      </div>
      -------------------------------------------
      <div class="box">
        <span><b>金额筛选</b></span>
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="condition.priceJudgeType" @change="selectBlurLogic">
          <el-option label="大于" value="gt"></el-option>
          <el-option label="小于" value="lt"></el-option>
          <el-option label="等于" value="eq"></el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-input
          v-model="condition.spenPrice"
          placeholder="金额输入"
          style="width: 175px"
        ></el-input>
        <br /><br />
      </div>
      -------------------------------------------
      <div class="box">
        <span><b>种类筛选</b></span>
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="condition.cateId" @change="selectBlurLogic">
          <el-option label="大于" value="gt"></el-option>
          <el-option label="小于" value="lt"></el-option>
          <el-option label="等于" value="eq"></el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-input
          v-model="condition.cateId"
          placeholder="种类ID输入"
          style="width: 175px"
        ></el-input>
        <br /><br />
      </div>
      -------------------------------------------
    </el-dialog>

    <el-table :data="proSpenceData" border style="width: 100%">
      <el-table-column fixed prop="spenDate" label="日期" width="170">
      </el-table-column>
      <el-table-column prop="spenId" label="流水ID" width="120">
      </el-table-column>
      <el-table-column
        prop="targetProject.proName"
        label="项目名称"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="targetProject.proId" label="项目ID" width="120">
      </el-table-column>
      <el-table-column
        prop="targetCategory.cateName"
        label="消费类型"
        width="120"
      >
      </el-table-column>

      <el-table-column
        prop="targetProject.bank.bankId"
        label="扣款账户ID"
        width="120"
      >
      </el-table-column>

      <el-table-column
        prop="targetProject.user.account"
        label="消费者"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="targetProject.user.role.roleName"
        label="消费者角色"
        width="120"
      >
      </el-table-column>

      <el-table-column prop="spenPrice" label="消费金额" width="120">
      </el-table-column>
      <el-table-column prop="cateId" label="种类ID" width="120">
      </el-table-column>
      <el-table-column
        prop="targetCategory.cateName"
        label="种类名称"
        width="120"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="block">
      <span class="demonstration"></span>
      <br />
      <br />
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currPage"
        :page-sizes="[2, 3, 4, 5, 6]"
        :page-size="currPageSize"
        layout="sizes, prev, pager, next"
        :total="totalNum"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
export default {
  methods: {
    // 下拉框测试用
    selectBlurLogic(e) {
      console.log(e);
      console.log(this.addForm);
    },
    handleClick(row) {
      console.log(row);
    },
    getAllProSpence() {
      this.$http.post("/proSpence/search2", this.pageInfo).then((resp) => {
        if (resp.code === "200") {
          console.log(resp);
          // 下一步：获取resp里面的内容，展现到页面上
          this.proSpenceData = resp.data[0];
          this.totalNum = resp.data[1];
          this.totalPages = resp.data[2];
          this.currPage = resp.data[3];
          this.currPageSize = resp.data[4];
        } else {
          this.$message("系统维护中");
        }
      });
    },
    // 分页处理方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      console.log(this.pageInfo.pageSize);
      this.getAllProSpence();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.pageNum = val;
      console.log(this.pageInfo.pageNum);
      this.getAllProSpence();
    },
    // 处理项目ID条件筛选    // 处理项目ID条件筛选
    handleCommand(command) {
      this.$message("click on item " + command);
    },
  },
  created() {
    this.getAllProSpence();
  },

  data() {
    return {
      // 测试用
      addForm: {
        name: null,
      },
      // 条件查询弹出框控制变量
      centerDialogVisible: false,
      // 条件查询信息赋值
      // 如果要查多个数据，就需要一个空数组，并且使用正则表达式进行匹配输入格式，在最后使用js的String方法进行分割，成为一个数字数组
      condition: {
        spenPrice: null,
        spenDate: null,
        spenId: null,
        proId: null,
        cateId: null,
        proIdJudgeType : null,
        spenIdJudgeType : null,
        cateJudgeType: null,
        dateJudgeType :null,
        priceJudgeType :null,
      },

      // 分页结果信息
      totalNum: 1,
      totalPages: 1,
      currPage: 1,
      currPageSize: 2,
      proSpenceData: [],
      // 分页及条件筛选信息
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
      },
    };
  },
};
</script>
<style>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>